<template>
  <div class="hdr">
      <div class="herd">
        <div class="left">&lt;</div>
      <h2>限时秒杀</h2>
      <img src="qiaoxiaodong/xsms1.png" alt="">
      </div>
      <div class="ejly">
          <div v-for="(v,i) in arr" :key="i" @click="fun(v,i)" :class="{ red: num == i }">
              <p>{{v.date}}</p>
              <span>{{v.val}}</span>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                num:3,
                arr:[
                    {date:"10.00",val:"09月04日",code:0},
                    {date:"13.00",val:"09月04日",code:1},
                    {date:"16.00",val:"09月04日",code:2},
                    {date:"19.00",val:"09月04日",code:3}
                ]
            }
        },
        methods:{
            fun(v,i) {
                this.num = i;
                console.log(i);
                // if (this.num == 0) {
                //     this.$router.push("/xsms")
                // }
                if (this.num == 0) {
                    this.$router.push("/xsms")
                }
                if (this.num == 2) {
                    this.$router.push("/msb")
                }
                if (this.num == 1) {
                    this.$router.push("/msa")
                }
            }
        }
}

</script>
<style scoped>
    .herd {
    width: 100%;
    height: 1.4rem;
    /* background: #e96667; */
    display: flex;
    position: relative;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fff;
  }
  .left {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    font-size: 0.5rem;
    margin-left: 0.2rem;
    margin-top: 0.4rem;
  }
  h2 {
    /* flex: 2; */
    font-size: 0.6rem;
    /* color: #fff; */
    position: absolute;
    left: 2.7rem;
    top: 0.2rem;
  }
  img {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 6.8rem;
    top: 0.4rem;
  }
  .ejly {
      width: 100%;
      height: 1.2rem;
      /* background: red; */
      display: flex;
      background: #fff;
  }
  .red {
      width: 2.25rem;
      height: 1.2rem;
      margin: 0 auto;
      background: red;
      color: #fff;
  }
  .ejly div p {
      text-align: center;
      font-size: 0.4rem;
      margin-top: 0.2rem;
  }
  .ejly div span {
      margin-left: 0.35rem;
      font-size: 0.3rem;
  }
</style>